<template>
  <div class="data-container">
    <data-tree :project_id="project_id"></data-tree>
    <div class="data-main">
      <template v-if="currentTab">
        <data-tab></data-tab>
        <div class="data-wrapper">
          <template v-if="currentTab.menuType === 0">
            <data-factory  v-if="currentTab.operator === 'DATAFACTORY'"></data-factory>
            <task-editor v-else></task-editor>
          </template>
          <workflow-editor v-else></workflow-editor>
          <data-console></data-console>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import TaskEditor from "./task/task-editor";
import WorkflowEditor from "./workflow/workflow-editor";
import dataFactory from "./task/dataFactory-editor";
import DataConsole from "./components/data-console";
import DataTree from "./components/data-tree";
import DataTab from "./components/data-tab";
import { mapState } from "vuex";
export default {
  name: "DataMining",
  provide() {
    return {
      project_id: this.project_id
    };
  },
  components: {
    WorkflowEditor,
    TaskEditor,
    DataConsole,
    DataTree,
    DataTab,
    dataFactory
  },
  mounted() {
  },
  props: {
    project_id: String
  },
  computed: {
    ...mapState({
      currentTab: ({ data }) => data.currentTab
    })
  }
};
</script>
<style lang="scss">
.data-container {
  display: flex;
  height: 100%;
  width: 100%;
  .data-main {
    flex: 1;
    overflow: hidden;
    border-right: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
    border-top: 1px solid #e4e7ed;
  }
}

.data-wrapper {
  flex: 1;
  height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-left: none;
    border-radius: 0;
    border-top: none;
  }
  .el-tabs__item {
    position: relative;
    height: 28px;
    line-height: 28px;
    &.is-active:before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 3px;
      background: #409eff;
    }
  }
}
</style>
